<template>
  <div :key="id">
    <div class="flex space-between">
      <span>
        <el-checkbox v-model="isLimit" @change="handleSelect" />
        限制长度
      </span>
      <el-input-number
        v-show="isLimit"
        :min="1"
        :max="9999"
        v-model="maxLength"
        @update:modelValue="handleChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, onMounted, ref } from 'vue';
import type { UpdateStatus, VueComType } from '@/types';

const props = defineProps<{
  status: string;
  isShow: boolean;
  configKey: string;
  editCom: VueComType;
  id: string;
}>();
const updateStatus = inject<UpdateStatus>('updateStatus');

const isLimit = ref(false);
const maxLength = ref(props.status ? +props.status : 200);

onMounted(() => {
  if (props.status) isLimit.value = true;
});

function handleSelect(val: boolean) {
  isLimit.value = val;
  if (updateStatus) {
    if (isLimit.value) {
      updateStatus(props.configKey, String(maxLength.value));
    } else {
      updateStatus(props.configKey, '');
    }
  }
}
function handleChange(val: number) {
  if (updateStatus) updateStatus(props.configKey, String(val));
}
</script>

<style scoped></style>
